import {UnitPoolData} from "../../../script/frame/dataSource/DataModel";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import HerosInfoPage from "./HerosInfoPage";
import {LightButton} from "../component/LightButton";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {ChooseHeroBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";


export interface IProp {
}
export interface IState {
    visible: boolean;
    unitPoolDatas: UnitPoolData[];
    bAll: boolean;

    x: number;
    y: number;
    heroInfo: UnitPoolData;
    disable: boolean;
    lockDes: string;
}

export default class ChooseHeroBar extends ChooseHeroBarInterface<IProp, IState> {


    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            unitPoolDatas: [],
            bAll: false,

            x: 0,
            y: 0,
            heroInfo: undefined,
            disable: true,
            lockDes: ''
            // chooseHeroFun: (player: player, unitPoolData: UnitPoolData) => {},
        }
    }

    render = () => {
        const backSize = { h: 0.49800, w: 0.50000 };
        let xOffset: number = 0.01125;
        let yOffset: number = 0.04980;
        let XSpace: number = 0.00500;
        let YSpace: number = 0.01328;
        const iconSize = { h: 0.05810, w: 0.04375 }
        const backPos = { x: 0.25000, y: 0.16600 }

        const maxHeroNum: number = Configer.getConfig(ConfigKey.maxHeroNum);
        const board = Configer.getResource(ResourceKey.chooseHeroBarPath) as string;

        const bAllButtonSize = { h: 0.03, w: 0.056 };
        const bAllButtonPos = { x: 0.01250, y: 0.36 };

        const enterButtonPos = { x: 0.22500, y: 0.36 };

        let disableBlp = Configer.getResource(ResourceKey.disableBlp) as string
        const buttonBlp = Configer.getResource(ResourceKey.chooseHeroButton);

        let selectButtonImage = Configer.getResource(ResourceKey.chooseHeroSelectPath) as string
        if (this.state.bAll) {
            selectButtonImage = Configer.getResource(ResourceKey.chooseHeroUnSelectPath) as string
        }
        const arr: UnitPoolData[] = [];
        if (this.state.unitPoolDatas) {
            for (let i = 0; i < maxHeroNum; i++) {
                arr.push(this.state.unitPoolDatas[i])
            }
        }

        const showInfoPage = !!this.state.heroInfo;

        return <View   key={GuiKeys.chooseHeroBar} style={{  hidden: !this.state.visible, paddingL: xOffset, paddingT: yOffset,  backgroundImage: board, top: backPos.y, left: backPos.x, width: backSize.w, height: backSize.h }}>
            <View   key={GuiKeys.chooseHeroBarContent} style={{ width: 0.31250, height: backSize.h }}>
            {
                arr?.map(
                    (data, index, array) => {
                        const unitId = data?.id;
                        const unitData = DataRouter.getUnitDataByUnitId(unitId)
                        const i = index;
                        if (unitData) {
                            const art = DataRouterUtil.getIconUrlByIconData(unitData)
                            const itemSize = { w: iconSize.w, h: iconSize.h };
                            let disable = false
                            let mask = '';
                            let marginL = XSpace;
                            let marginT = YSpace;
                            let hidden = false;


                            if (data.enable) {
                            } else {
                                disable = true;
                                mask = disableBlp;
                                if (this.state.bAll) {
                                } else {
                                    marginL = 0;
                                    marginT = 0;
                                    hidden = true;
                                }
                            }
                            return <LightButton   key={`${GuiKeys.chooseHeroIcon}|${i}`} onMouseDown={ (event) => { this.showHeroInfo(event.x, event.y, data, disable, data.lockDes) } } style={{ hidden, marginL, marginT, backgroundImage: art, mask, width: itemSize.w, height: itemSize.h }}></LightButton>
                        }
                        return <LightButton   key={`${GuiKeys.chooseHeroIcon}|${i}`} style={{ hidden: true }}></LightButton>
                    }
                )
            }
            </View>
            <LightButton   key={GuiKeys.chooseHeroAllButton} onMouseDown={this.showAll} style={{ float: true, backgroundImage: selectButtonImage, marginT: bAllButtonPos.y, marginL: bAllButtonPos.x, width: bAllButtonSize.w, height: bAllButtonSize.h }}></LightButton>
            <LightButton   key={GuiKeys.chooseHeroEnter} onMouseDown={() => { return this.chooseHero(this.state.heroInfo?.id, this.state.disable, this.state.lockDes) }} style={{ float: true, fontAlign: TextAlign.center, backgroundImage: buttonBlp, marginT: enterButtonPos.y, marginL: enterButtonPos.x, width: bAllButtonSize.w, height: bAllButtonSize.h, paddingT: 0.00498 }}></LightButton>
            <HerosInfoPage   hidden={!showInfoPage}  key={GuiKeys.chooseHeroInfoCon} x={this.state.x} y={this.state.y} heroInfo={this.state.heroInfo}></HerosInfoPage>
        </View>
    }

    showAll = () => {
        this.setState({
            ...this.state,
            bAll: !this.state.bAll,
        })
    }

    showHeroBar = (unitPoolDatas: UnitPoolData[], bAll: boolean, visible: boolean) => {
        this.setState({
            ...this.state,
            unitPoolDatas: unitPoolDatas,
            bAll: bAll,
            visible: visible,
            x: 0,
            y: 0,
            heroInfo: undefined,
        })
    }

    showHeroInfo = (x: number, y: number, heroInfo: UnitPoolData, disable: boolean, lockDes: string) => {
        this.setState({
            ...this.state,
            heroInfo: heroInfo,
            x,
            y,
            disable,
            lockDes,
        })
    }

    // hideHeroInfo = () => {
    //     this.setState({
    //         ...this.state,
    //         heroInfo: undefined,
    //     })
    // }

    chooseHero = (id: string, disable: boolean, des: string): UISyncData => {
        if (des) {
            Logger.toastProduct(des, PlayerFactory.getInstance().getLocalPlayer())
        }
        if (disable) {
            return;
        }

        const event: UISyncData = { id: SyncId.chooseHero, param: { heroId: id } }
        return event;
    }

    closeChooseHero = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}